<template>
  <a-form
    class="modal_form"
    :model="modalFrom"
    name="basic"
    :label-col="{ style: 'width: 120px' }"
  >
    <a-form-item label="触发人数">
      <a-input-number
        style="display: block; width: 120px"
        v-model:value="modalFrom.peopleNum"
        :step="1"
        :min="1"
      >
      </a-input-number>
    </a-form-item>
    <a-form-item label="福袋Id" :extra="lineText">
      <a-textarea
        v-model:value="modalFrom.luckyBagIds"
        placeholder="请输入福袋Id，一行一个，最多10行"
      />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props: any = withDefaults(
  defineProps<{
    modalFrom?: any;
  }>(),
  {
    modalFrom: () => {},
  }
);

const lineText = computed(() => {
  const lineCount = props.modalFrom.luckyBagIds
    .split("\n")
    .filter((line: string) => line.trim()).length;
  return `${lineCount}/10`;
});
</script>

<style scoped lang="less"></style>
